<template>
  <!-- 直播报名付费 -->
  <div class="streamingpay" id="streamingpay">
    <Header></Header>
    <!--本来应该是导航，（方便全局替换）-->
    <!-- <HHeader></HHeader> -->
    <div class="streamingdetail_cont">
      <div class="caseCont_crumbs">
        <div class="caseCont_crumbs_cont">
          <span>
            <router-link :to="{name:'home'}">首页</router-link>
          </span>
          <i class="iconfont icon-youjiantou"></i>
          <span>
            <router-link
              :to="{name:'streamingdetail',query:{OpCourseId:this.$route.query.courseId,type:this.$route.query.type,Hftype:this.$route.query.Hftype}}"
            >直播课程</router-link>
          </span>
          <i class="iconfont icon-youjiantou"></i>
          <span>{{this.coursedetail.CourseName}}</span>
        </div>
      </div>
      <div class="streamingdetail_cont_main">
        <div class="streamingdetail_cont_main_info">
          <p class="main_info_titi">课程信息确认</p>
          <div class="streamingdetail_cont_main_info_cont">
            <div class="streamingdetail_cont_main_info_cont_img">
              <img :src="this.coursedetail.CoverPicturePath" alt />
            </div>
            <div class="streamingdetail_cont_main_info_cont_right">
              <p title="软件测试之Jmeter高级性能测试项目实战(赠送Loadrunner实战）">{{this.coursedetail.CourseName}}</p>
              <p>
                <!-- <span>¥{{this.coursedetail.Price}}</span>
                <i>/</i>
                <span>{{disCount}}折后：<span>￥{{zheprice}}</span>
                </span>-->
                <span
                  v-if="this.coursedetail.DisCount < 1"
                >￥{{(this.coursedetail.Price * this.coursedetail.DisCount).toFixed(2)}}</span>
                <span
                  style="text-decoration:line-through"
                  v-if="this.coursedetail.DisCount < 1"
                >￥{{this.coursedetail.Price}}</span>
                <span v-if="this.coursedetail.DisCount >= 1">￥{{this.coursedetail.Price}}</span>
              </p>
              <div class="streamingdetail_cont_main_right_date">
                <h2 class="hidden-clip">{{this.coursedetail.CourseName}}</h2>
                <p>{{this.coursedetail.StartDate}} 至 {{this.coursedetail.EndDate}}</p>
              </div>
            </div>
            <div style="clear:both;"></div>
          </div>
        </div>
        <div class="streamingdetail_cont_main_phone">
          <p class="main_info_titi">
            课程提醒发送至
            <span>绑定手机号以便提供教学服务</span>
          </p>
          <p>手机号：{{this.coursedetail.Mobile}}</p>
        </div>
        <div class="streamingdetail_cont_main_article" v-show="this.IsuploadB">
          <p class="main_info_titi">*请选择学科</p>
          <el-select v-model="value" size="small" placeholder="请选择" @change="hadle">
            <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <!-- <span style="float: left">{{ item.label }}</span> -->
            </el-option>
          </el-select>
          <p class="main_info_titi" style="margin-top:21px">*请上传您要预审的稿件</p>
          <el-input v-model="detection" disabled></el-input>
          <el-upload
            class="upload-demo"
            ref="upload"
            action="/api/LmUserApi/Save"
            :limit="1"
            :before-upload="beforeUpload"
            id="file"
          >
            <el-button slot="trigger" size="small" class="filedolown" id="filedolown">上传</el-button>
          </el-upload>
          <div style="clear:both"></div>
          <!-- <p class="ddddd">你好</p>
          <p class="ddddd dddddB">01</p>-->
        </div>
        <div class="streamingdetail_cont_main_info_money">
          <p class="main_info_titi">需支付金额</p>
          <p>
            课程价格
            <span>¥{{this.coursedetail.Price}}</span>
          </p>
          <!-- <p>机构优惠<span>-¥{{jgpay}}</span></p> -->
          <p>
            应付金额
            <span>¥{{zheprice}}</span>
          </p>
        </div>
        <div class="streamingdetail_cont_main_info_paymoney" @click.once="submipay()" id="url">确认付款</div>
        <div class="vipcontC">
          <div class="vipcontC_contA">
            <div class="vipcontC_contA_line"></div>
            <span>选择支付方式</span>
          </div>
          <div class="fileDetection_content_contC_body">
            <div class="fileDetection_content_contC_body_paymethods">
              <div style="cursor:pointer" @click.once="getWxPay()" id="url">
                <img src="../../../../static/sc/wxpay.png" alt />
              </div>
              <div style="cursor:pointer" @click="zfbPay()">
                <img src="../../../../static/sc/zfbpay.png" alt />
              </div>
            </div>
            <div class="paymethod_code" id="wxpay">
              <img src alt />
            </div>
          </div>
        </div>
      </div>
      <div class="mowhite"></div>
    </div>
    <NaviRight></NaviRight>
    <FootBase></FootBase>
    
  </div>
</template>

<script>
//juqery
import util from "../../../assets/script/util";
import QRCode from "qrcodejs2";

export default {
  inject: ["reload"],
  data() {
    return {
      jumpUrl: null,
      wxOrderNumber: "",
      timer: null,
      coursedetail: {},
      zheprice: "",
      // 机构优惠价格
      jgpay: "",
      detectionB: "",
      detection: "",
      author: "",
      // 折扣
      disCount: "",
      CIDB: "",
      IsuploadB: "",

      cities: [
        {
          lable: "人体解剖与组织胚胎学",
          value: "人体解剖与组织胚胎学"
        },
        {
          lable: "免疫学",
          value: "免疫学"
        },
        {
          lable: "病原生物学",
          value: "病原生物学"
        },
        {
          lable: "病理学与病理生理学",
          value: "病理学与病理生理学"
        },
        {
          lable: "法医学",
          value: "法医学"
        },
        {
          lable: "放射医学",
          value: "放射医学"
        },
        {
          lable: "航空、航天与航海医学",
          value: "航空、航天与航海医学"
        },
        {
          lable: "内科学",
          value: "内科学"
        },
        {
          lable: "儿科学",
          value: "儿科学"
        },
        {
          lable: "老年医学",
          value: "老年医学"
        },
        {
          lable: "神经病学",
          value: "神经病学"
        },
        {
          lable: "精神病与精神卫生学",
          value: "精神病与精神卫生学"
        },
        {
          lable: "皮肤病与性病学",
          value: "皮肤病与性病学"
        },
        {
          lable: "影像医学与核医学",
          value: "影像医学与核医学"
        },
        {
          lable: "临床检验诊断学",
          value: "临床检验诊断学"
        },
        {
          lable: "护理学",
          value: "护理学"
        },
        {
          lable: "外科学",
          value: "外科学"
        },
        {
          lable: "妇产科学",
          value: "妇产科学"
        },
        {
          lable: "眼科学",
          value: "眼科学"
        },
        {
          lable: "耳鼻咽喉科学",
          value: "耳鼻咽喉科学"
        },
        {
          lable: "肿瘤学",
          value: "肿瘤学"
        },
        {
          lable: "康复医学与理疗学",
          value: "康复医学与理疗学"
        },
        {
          lable: "运动医学",
          value: "运动医学"
        },
        {
          lable: "麻醉学",
          value: "麻醉学"
        },
        {
          lable: "急诊医学",
          value: "急诊医学"
        },
        {
          lable: "口腔基础医学",
          value: "口腔基础医学"
        },
        {
          lable: "口腔临床医学",
          value: "口腔临床医学"
        },
        {
          lable: "流行病与卫生统计学",
          value: "流行病与卫生统计学"
        },
        {
          lable: "劳动卫生与环境卫生学",
          value: "劳动卫生与环境卫生学"
        },
        {
          lable: "营养与食品卫生学",
          value: "营养与食品卫生学"
        },
        {
          lable: "儿少卫生与妇幼保健学",
          value: "儿少卫生与妇幼保健学"
        },
        {
          lable: "卫生毒理学",
          value: "卫生毒理学"
        },
        {
          lable: "军事预防医学",
          value: "军事预防医学"
        },
        {
          lable: "中医基础理论",
          value: "中医基础理论"
        },
        {
          lable: "中医临床基础",
          value: "中医临床基础"
        },
        {
          lable: "中医医史文献",
          value: "中医医史文献"
        },
        {
          lable: "方剂学",
          value: "方剂学"
        },
        {
          lable: "中医诊断学",
          value: "中医诊断学"
        },
        {
          lable: "中医内科学",
          value: "中医内科学"
        },
        {
          lable: "中医外科学",
          value: "中医外科学"
        },
        {
          lable: "中医骨伤科学",
          value: "中医骨伤科学"
        },
        {
          lable: "中医妇科学",
          value: "中医妇科学"
        },
        {
          lable: "中医儿科学",
          value: "中医儿科学"
        },
        {
          lable: "中医五官科学",
          value: "中医五官科学"
        },
        {
          lable: "针灸推拿学",
          value: "针灸推拿学"
        },
        {
          lable: "民族医学",
          value: "民族医学"
        },
        {
          lable: "中西医结合基础",
          value: "中西医结合基础"
        },
        {
          lable: "中西医结合临床",
          value: "中西医结合临床"
        },
        {
          lable: "药物化学",
          value: "药物化学"
        },
        {
          lable: "药剂学",
          value: "药剂学"
        },
        {
          lable: "生药学",
          value: "生药学"
        },
        {
          lable: "药物分析学",
          value: "药物分析学"
        },
        {
          lable: "微生物与生化药学",
          value: "微生物与生化药学"
        },
        {
          lable: "药理学",
          value: "药理学"
        }
      ],

      value: "",
      coursaeval: "",

      cswxdata: [],
      cszfbdata: [],

      Money: ""
    };
  },
  methods: {
    // 获取下拉学科值
    hadle(value) {
      this.coursaeval = value;
    },
    // 确认付款
    submipay() {
      $(".vipcontC").css("display", "block");
      // 加密完成
      this.$httphelper
        .post("/api/LmCourseApi/GetCourseApply", {
          Sign: "string",
          AuthorId: localStorage.getItem("AuthorId"),
          ClassId: this.$route.query.classId,
          CouresId: this.$route.query.courseId,
          ContributePath: this.detectionB,
          Subject: this.coursaeval
        })
        .then(res => {
          this.CIDB = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 微信支付
    getWxPay() {
      this.cswxdata = util.getWxpaydetail(2, 5, this.Money, this.CIDB);
      this.cswxdata.then(data => {
        // pc端
        if (data.data.data.Code == 200) {
          $(".paymethod_code").css("display", "block");
          $("#wxpay").html("");
          var qrcode = new QRCode(document.getElementById("wxpay"), {
            width: 100,
            height: 100
          });
          qrcode.makeCode(data.data.data.data.qrCodeUrl);
          this.wxOrderNumber = data.data.data.data.OutTradeNo;
          var _this = this;
          this.timer = setInterval(() => {
            _this.WxPayOK();
          }, 3000);
        }
        // 移动端
        else if (data.data.code == 200) {
          $("#url").click(function() {
            location.href = data.data.data.qrCodeUrl;
          });
          $("#url").click();
        } else {
          alert("生成订单失败");
        }
      });
    },
    // 支付宝支付
    zfbPay() {
      clearInterval(this.timer);
      $(".paymethod_code").css("display", "none");

      this.cszfbdata = util.zfbpaydetail(2, 5, this.Money, this.CIDB);
      this.cszfbdata.then(res => {
        if (res.data.data.Code == 200) {
          let divForm = document.getElementsByTagName("divform");
          if (divForm.length) {
            document.body.removeChild(divForm[0]);
          }
          const div = document.createElement("divform");

          div.innerHTML = res.data.data.data.responseBody;
          document.body.appendChild(div);
          document.forms[0].acceptCharset = "UTF-8";
          document.forms[0].setAttribute("target", "_blank");
          document.forms[0].submit();
        } else if (res.data.code) {
          let divForm = document.getElementsByTagName("divform");
          if (divForm.length) {
            document.body.removeChild(divForm[0]);
          }
          const div = document.createElement("divform");

          div.innerHTML = res.data.data.responseBody;
          document.body.appendChild(div);
          document.forms[0].acceptCharset = "UTF-8";
          document.forms[0].setAttribute("target", "_blank");
          document.forms[0].submit();
        }
      });
    },
    // 判断是否支付成功
    WxPayOK() {
      this.$httphelper
        .post("/api/LmPayApi/WxCheckVerify", {
          OutTradeNo: this.wxOrderNumber,
          payStatus: 0,
          bsparam: "string"
        })
        .then(res => {
          if (res.data.data == 1) {
            clearInterval(this.timer);
            this.$message({
              type: "success",
              message: "支付成功!"
            });
            this.reload();
            this.$router.push({
              path: "/paysuccess",
              query: {
                type: 5
              }
            });
          } else {
            clearInterval(this.timer);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取支付页面详情
    getcoursedetail() {
      // 加密完成
      this.$httphelper
        .post("/api/LmCourseApi/GetApplyAffirm", {
          Sign: "string",
          AuthorId: localStorage.getItem("AuthorId"),
          ClassId: this.$route.query.classId
        })
        .then(res => {
          this.coursedetail = res.data.data;
          this.coursedetail.Price = this.coursedetail.Price.toFixed(2);
          this.zheprice = (
            this.coursedetail.Price * this.coursedetail.DisCount
          ).toFixed(2);
          this.coursedetail.StartDate = this.coursedetail.StartDate.substr(
            0,
            10
          );
          this.coursedetail.EndDate = this.coursedetail.EndDate.substr(0, 10);

          this.IsuploadB = this.coursedetail.Isupload;

          this.jgpay = (this.coursedetail.Price - this.zheprice).toFixed(2);

          this.disCount = parseInt(this.coursedetail.DisCount * 10);

          if (this.coursedetail.DisCount < 1) {
            this.Money = (
              this.coursedetail.Price * this.coursedetail.DisCount
            ).toFixed(2);
          } else if (this.coursedetail.DisCount >= 1) {
            this.Money = this.coursedetail.Price;
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    // 上传文件
    beforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "doc";
      const extension2 = testmsg === "docx";
      // const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension2) {
        this.$message({
          message: "上传文件只能是 doc、docx格式!",
          type: "warning"
        });
        return extension || extension2;
      } else {
        this.files = file;
        const isLt2M = file.size / 1024 / 1024 < 60;
        if (!isLt2M) {
          this.$message.warning("上传模板大小不能超过 60MB!");
          return;
        }
        this.detection = this.files.name;
        this.fileName = file.name;
        // return false // 返回false不会自动上传
        this.submitUpload();
      }
    },
    // 上传文件
    submitUpload() {
      if (this.fileName == "") {
        this.$message.warning("请选择要上传的文件！");
        return false;
      }
      let fileFormData = new FormData();
      fileFormData.append("filename", this.files, this.fileName); //filename是键，file是值，就是要传的文件，test.zip是要传的文件名
      let requestConfig = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      this.$httphelper
        .post("/api/LmUserApi/Save", fileFormData, requestConfig)
        .then(res => {
          let path = JSON.parse(res.data);
          this.detectionB = path.filePath;
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  mounted() {},
  watch: {
    // 新窗口打开页面，解决浏览器拦截问题
    jumpUrl() {
      if (this.jumpUrl) {
        window.open(this.jumpUrl, "_blank");
      }
      this.jumpUrl = null;
    }
  },
  created() {
    this.getcoursedetail();
  },
  destroyed() {
    if (this.timer) {
      //如果定时器在运行则关闭
      clearInterval(this.timer);
    }
  }
};
</script>

<style lang="less" scoped>
#streamingpay {
  .streamingdetail_cont {
    width: 100%;
    height: 1172px;
    background: #f4f4f4;
    position: relative;
    .caseCont_crumbs {
      width: 1200px;
      height: 50px;
      margin: 0 auto;
      position: relative;
      top: 28px;
      text-align: left;
      line-height: 20px;
      padding-left: 10px;
      .caseCont_crumbs_cont {
        float: left;
        span:nth-child(1) a {
          color: #000000;
          font-size: 16px;
          font-weight: bold;
          cursor: pointer;
        }
        span:nth-child(3) a {
          color: #000000;
          font-size: 16px;
          font-weight: bold;
          cursor: pointer;
        }
        i {
          color: #767c82;
          font-size: 18px;
          margin-left: 10px;
          font-weight: bold;
        }
        span:nth-child(5) {
          color: #003c80;
          font-size: 16px;
          margin-left: 10px;
          font-weight: bold;
          cursor: pointer;
        }
      }
    }
    .streamingdetail_cont_main {
      width: 1200px;
      height: auto;
      background: #fff;
      margin: 0 auto;
      position: relative;
      top: 40px;
      padding: 20px;
      .streamingdetail_cont_main_info {
        padding: 30px 0;
        border-bottom: 1px solid #eee;
        padding-top: 10px;
        .main_info_titi {
          font-size: 16px;
          color: #333;
          margin-bottom: 15px;
        }
        .streamingdetail_cont_main_info_cont {
          width: 100%;
          .streamingdetail_cont_main_info_cont_img {
            width: 280px;
            height: 156px;
            float: left;
            img {
              display: inline-block;
              width: 100%;
              height: 100%;
            }
          }
          .streamingdetail_cont_main_info_cont_right {
            width: 850px;
            height: 156px;
            float: right;
            p:nth-child(1) {
              color: #333;
              font-size: 22px;
              line-height: 1.5;
              overflow: hidden;
              white-space: nowrap;
              -o-text-overflow: ellipsis;
              text-overflow: ellipsis;
            }
            p:nth-child(2) {
              margin-top: 19px;
              line-height: 24px;
              span:nth-child(1) {
                font-size: 24px;
                color: #ff0042;
              }
              span:nth-child(2) {
                font-size: 16px;
                color: #999;
                position: relative;
                top: -2px;
                text-decoration: line-through;
              }
            }
            .streamingdetail_cont_main_right_date {
              border: 1px solid #e5e5e5;
              padding: 5px 15px 6px;
              position: relative;
              margin-top: 27px;
              height: 49px;
              line-height: 42px;
              .hidden-clip {
                clip: inherit;
                top: -20px;
                font-size: 16px;
                background: #fff;
                line-height: 35px;
                padding: 0 5px;
                position: absolute;
              }
              p {
                color: #333;
                font-size: 15px;
                position: absolute;
                top: -3px;
              }
            }
          }
        }
      }
      .streamingdetail_cont_main_phone {
        padding: 16px 0;
        border-bottom: 1px solid #eee;
        p:nth-child(1) {
          font-size: 16px;
          color: #333;
          margin-bottom: 15px;
          span {
            color: #999;
            font-size: 14px;
            margin: 0 10px;
          }
        }
        p:nth-child(2) {
          font-size: 18px;
          color: #333;
        }
      }

      .streamingdetail_cont_main_article {
        padding: 16px 0;
        border-bottom: 1px solid #eee;
        height: 230px;
        position: relative;
        p {
          font-size: 16px;
          color: #003c80;
          margin-bottom: 15px;
        }
        /deep/.el-input {
          width: 40%;
          float: left;
          /deep/.el-input.is-disabled .el-input__inner {
            background: #fff;
          }
        }
        /deep/.el-upload {
          float: left;
          margin-left: 22px;
          margin-top: 4px;
        }
        /deep/.el-upload-list {
          position: absolute !important;
          top: 191px !important;
        }
        /deep/.el-select {
          /deep/.el-input {
            width: 100%;
          }
        }
      }

      .streamingdetail_cont_main_info_money {
        width: 100%;
        padding: 30px 0;
        p {
          font-size: 14px;
          line-height: 30px;
          margin-bottom: 10px;
          text-align: left;
          span {
            margin-left: 32px;
          }
        }
        .main_info_titi {
          font-size: 16px;
          color: #333;
          margin-bottom: 15px;
        }
      }
      .streamingdetail_cont_main_info_paymoney {
        width: 120px;
        height: 40px;
        background: #003c80;
        text-align: center;
        line-height: 40px;
        color: #fff;
        position: relative;
        // left: 87%;
        font-size: 16px;
        cursor: pointer;
      }
      .vipcontC {
        display: none;
        width: 60%;
        position: relative;
        margin-top: 20px;
        left: 15%;
        top: -65px;
        .vipcontC_contA {
          .vipcontC_contA_line {
            display: inline-block;
            width: 2px;
            height: 26px;
            background: #003c80;
            position: relative;
            top: 10px;
          }
          span {
            color: #000;
            font-size: 16px;
            font-weight: bold;
            margin-left: 20px;
            position: relative;
            top: 3px;
          }
        }
        .fileDetection_content_contC_body {
          margin-top: 24px;
          width: 66%;
          .fileDetection_content_contC_body_paymethods {
            width: 100%;
            div {
              display: inline-block;
              width: 137px;
              height: 43px;
              border: 1px solid #a0a0a0;
              img {
                width: 70%;
                height: 70%;
                margin-left: 17px;
                margin-top: 7px;
              }
            }
            div:nth-child(1) {
              margin-left: 25px;
            }
            div:nth-child(2) {
              margin-left: 61px;
            }
          }
          .paymethod_code {
            display: none;
            width: 114px;
            height: 114px;
            border: 1px solid #bcbcbc;
            margin-left: 25px;
            margin-top: 40px;
            /deep/img {
              display: block;
              margin-top: 7px;
              margin-left: 6px;
            }
          }
        }
      }
    }
  }
  .ddddd {
    width: 60px;
    height: 60px;
    line-height: 47px;
    font-size: 20px;
    font-weight: bold;
    transform: rotate(-30deg);
    border-radius: 50%;
    padding: 5px;
  }
  .dddddB {
    margin-top: -61px;
    position: relative;
    left: 21px;
  }
}
@media screen and (max-width: 1010px) {
  .mowhite {
    width: 100%;
    height: 60px;
    background: #fff;
  }
  .streamingdetail_cont {
    margin-top: 60px;
    // margin-bottom: 86px;
    height: auto !important;
    .caseCont_crumbs {
      display: none;
    }
    .streamingdetail_cont_main {
      width: 100% !important;
      top: 0px !important;
      .streamingdetail_cont_main_info_cont {
        .streamingdetail_cont_main_info_cont_img {
          width: 100% !important;
          height: auto !important;
          float: none !important;
        }
        .streamingdetail_cont_main_info_cont_right {
          width: 100% !important;
          float: none !important;
          p:nth-child(1) {
            font-size: 20px !important;
          }
          p:nth-child(2) {
            span:nth-child(1) {
              font-size: 20px !important;
            }
          }
        }
      }
      .streamingdetail_cont_main_article {
        /deep/.el-select {
          width: 100%;
          /deep/.el-input {
            width: 100% !important;
          }
        }
        /deep/.el-input {
          width: 73% !important;
        }
      }
      .vipcontC {
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        .fileDetection_content_contC_body {
          width: 100% !important;
        }
        .fileDetection_content_contC_body_paymethods {
          height: 50px;
          div {
            width: 35% !important;
          }
          div:nth-child(1) {
            margin-left: 0 !important;
            float: left;
          }
          div:nth-child(2) {
            float: left;
            margin-left: 10% !important;
            // top: -43px;
            // position: relative;
          }
        }
      }
    }
  }
}
@media screen and (min-width: 1010px) {
  .mowhite {
    display: none;
  }
}
</style>